let ul = document.querySelector('.content > ul');
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
let totalBox = document.querySelector('.total');
let selectBox = document.querySelector('select');

let currentNum = 1; // 默认当前页 为 第 1 页
let pageSize = 4; // 默认打开时 每页展示 4 条数据
let  totalNum = 0; // 记录一下总页码

// 1. 准备渲染函数
function Fn1() {
  let newList = list.slice(
    (currentNum - 1) * pageSize,
    currentNum * pageSize
  );

  ul.innerHTML = newList.reduce(function (v, item) {
    return (
      v +
      `<li>
              <img src="${item.pic}" alt="">
              <p>${item.name}</p>
              <p>城市: ${item.city}</p>
              <p>地址: ${item.address}</p>
              <p>价格: ${item.price}</p>
              <p>时间: ${item.showTime}</p>
          <>`
    );
  }, "");
  // 2. 调整页码信息
  // 2.1 计算总页码
  totalNum = Math.ceil(list.length / pageSize);

  // 2.2 渲染到页面
  totalBox.innerHTML = `${currentNum} / ${totalNum}`;

  prevBtn.className = currentNum == 1 ? "prev disable" : "prev";

  // 3.2 如果当前页在最后一页 (当前页 === 总页码) 禁用下一页按钮 (添加类名 disable)
  nextBtn.className = currentNum == totalNum ? "next disable" : "next";
}

// 2. 首次打开页面 调用
Fn1();

// 3. 点击下一页按钮
nextBtn.onclick = function () {
  // 3.0 边界判断
  if (currentNum == totalNum) return;

  // 3.1 当前页++
  currentNum++;

  // 3.2 重新调用渲染函数
  Fn1();
};

// 4. 点击上一页按钮
prevBtn.onclick = function () {
  // 4.0 边界判断
  if (currentNum === 1) return;

  // 4.1 当前页--
  currentNum--;

  // 4.2 重新调用渲染函数
  Fn1();
};

// 5. 改变每页展示数据
selectBox.onchange = function () {
  // 5.1 改每页展示数据
  pageSize = selectBox.value;
  // 5.2 调用渲染函数
  Fn1();
};